import Web3 from "web3";
import { useEffect, useState } from "react";
import BN from "bn.js";

const UseDex = () => {
  const web3 = new Web3("ws://127.0.0.1:7545");

  // === 合约信息 ===
  const senderAddress = "0x6A48D9977aDA46b5B2Da4b1652dcc0d1F7C771f6";
  const usdtAddress = "0xdA627F9BBA4a93bE90F508371850392EDfAEc02A";
  const usdtAbi = [
    { type: "constructor", inputs: [], stateMutability: "nonpayable" },
    { type: "receive", stateMutability: "payable" },
    {
      type: "function",
      name: "allowance",
      inputs: [
        { name: "", type: "address", internalType: "address" },
        { name: "", type: "address", internalType: "address" }
      ],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "approve",
      inputs: [
        { name: "spender", type: "address", internalType: "address" },
        { name: "value", type: "uint256", internalType: "uint256" }
      ],
      outputs: [{ name: "success", type: "bool", internalType: "bool" }],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "balanceOf",
      inputs: [{ name: "", type: "address", internalType: "address" }],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "buyToken",
      inputs: [],
      outputs: [{ name: "success", type: "bool", internalType: "bool" }],
      stateMutability: "payable"
    },
    {
      type: "function",
      name: "decimals",
      inputs: [],
      outputs: [{ name: "", type: "uint8", internalType: "uint8" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "name",
      inputs: [],
      outputs: [{ name: "", type: "string", internalType: "string" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "owner",
      inputs: [],
      outputs: [{ name: "", type: "address", internalType: "address" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "rate",
      inputs: [],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "symbol",
      inputs: [],
      outputs: [{ name: "", type: "string", internalType: "string" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "totalSupply",
      inputs: [],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "transfer",
      inputs: [
        { name: "to", type: "address", internalType: "address" },
        { name: "value", type: "uint256", internalType: "uint256" }
      ],
      outputs: [{ name: "success", type: "bool", internalType: "bool" }],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "transferFrom",
      inputs: [
        { name: "form", type: "address", internalType: "address" },
        { name: "to", type: "address", internalType: "address" },
        { name: "value", type: "uint256", internalType: "uint256" }
      ],
      outputs: [{ name: "success", type: "bool", internalType: "bool" }],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "withdraw",
      inputs: [{ name: "amount", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "event",
      name: "Approval",
      inputs: [
        {
          name: "owner",
          type: "address",
          indexed: true,
          internalType: "address"
        },
        {
          name: "spender",
          type: "address",
          indexed: true,
          internalType: "address"
        },
        {
          name: "value",
          type: "uint256",
          indexed: false,
          internalType: "uint256"
        }
      ],
      anonymous: false
    },
    {
      type: "event",
      name: "Transfer",
      inputs: [
        {
          name: "from",
          type: "address",
          indexed: true,
          internalType: "address"
        },
        {
          name: "to",
          type: "address",
          indexed: true,
          internalType: "address"
        },
        {
          name: "value",
          type: "uint256",
          indexed: false,
          internalType: "uint256"
        }
      ],
      anonymous: false
    }
  ];

  const wowAddress = "0xFFabB1a33e6fbEd2EC0C941b0c1BbfAef63A4423";
  const wowAbi = [
    { type: "constructor", inputs: [], stateMutability: "nonpayable" },
    { type: "receive", stateMutability: "payable" },
    {
      type: "function",
      name: "allowance",
      inputs: [
        { name: "", type: "address", internalType: "address" },
        { name: "", type: "address", internalType: "address" }
      ],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "approve",
      inputs: [
        { name: "spender", type: "address", internalType: "address" },
        { name: "value", type: "uint256", internalType: "uint256" }
      ],
      outputs: [{ name: "success", type: "bool", internalType: "bool" }],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "balanceOf",
      inputs: [{ name: "", type: "address", internalType: "address" }],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "buyToken",
      inputs: [],
      outputs: [{ name: "success", type: "bool", internalType: "bool" }],
      stateMutability: "payable"
    },
    {
      type: "function",
      name: "decimals",
      inputs: [],
      outputs: [{ name: "", type: "uint8", internalType: "uint8" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "name",
      inputs: [],
      outputs: [{ name: "", type: "string", internalType: "string" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "owner",
      inputs: [],
      outputs: [{ name: "", type: "address", internalType: "address" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "rate",
      inputs: [],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "symbol",
      inputs: [],
      outputs: [{ name: "", type: "string", internalType: "string" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "targetTokenAddress",
      inputs: [],
      outputs: [{ name: "", type: "address", internalType: "address" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "totalSupply",
      inputs: [],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "transfer",
      inputs: [
        { name: "to", type: "address", internalType: "address" },
        { name: "value", type: "uint256", internalType: "uint256" }
      ],
      outputs: [{ name: "success", type: "bool", internalType: "bool" }],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "transferFrom",
      inputs: [
        { name: "from", type: "address", internalType: "address" },
        { name: "to", type: "address", internalType: "address" },
        { name: "value", type: "uint256", internalType: "uint256" }
      ],
      outputs: [{ name: "success", type: "bool", internalType: "bool" }],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "withdraw",
      inputs: [{ name: "amount", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "event",
      name: "Approval",
      inputs: [
        {
          name: "owner",
          type: "address",
          indexed: true,
          internalType: "address"
        },
        {
          name: "spender",
          type: "address",
          indexed: true,
          internalType: "address"
        },
        {
          name: "value",
          type: "uint256",
          indexed: false,
          internalType: "uint256"
        }
      ],
      anonymous: false
    },
    {
      type: "event",
      name: "Transfer",
      inputs: [
        {
          name: "from",
          type: "address",
          indexed: true,
          internalType: "address"
        },
        {
          name: "to",
          type: "address",
          indexed: true,
          internalType: "address"
        },
        {
          name: "value",
          type: "uint256",
          indexed: false,
          internalType: "uint256"
        }
      ],
      anonymous: false
    }
  ];

  const swapAddress = "0x50120a3C016B350728B74a2F6B62e82Fb8ca527f";
  const swapAbi = [
    {
      type: "constructor",
      inputs: [
        { name: "_usdt", type: "address", internalType: "address" },
        { name: "_wow", type: "address", internalType: "address" },
        {
          name: "_usdtToWowRate",
          type: "uint256",
          internalType: "uint256"
        },
        {
          name: "_wowToUsdtRate",
          type: "uint256",
          internalType: "uint256"
        }
      ],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "buyUSDT",
      inputs: [{ name: "wowAmount", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "buyWOW",
      inputs: [
        { name: "usdtAmount", type: "uint256", internalType: "uint256" }
      ],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "depositUSDT",
      inputs: [{ name: "amount", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "depositWOW",
      inputs: [{ name: "amount", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "owner",
      inputs: [],
      outputs: [{ name: "", type: "address", internalType: "address" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "setUsdtToWowRate",
      inputs: [{ name: "newRate", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "setWowToUsdtRate",
      inputs: [{ name: "newRate", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "usdt",
      inputs: [],
      outputs: [{ name: "", type: "address", internalType: "contract IERC20" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "usdtToWowRate",
      inputs: [],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "withdrawUSDT",
      inputs: [{ name: "amount", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "withdrawWOW",
      inputs: [{ name: "amount", type: "uint256", internalType: "uint256" }],
      outputs: [],
      stateMutability: "nonpayable"
    },
    {
      type: "function",
      name: "wow",
      inputs: [],
      outputs: [{ name: "", type: "address", internalType: "contract IERC20" }],
      stateMutability: "view"
    },
    {
      type: "function",
      name: "wowToUsdtRate",
      inputs: [],
      outputs: [{ name: "", type: "uint256", internalType: "uint256" }],
      stateMutability: "view"
    }
  ];

  // 初始化 合约
  const usdtCt = new web3.eth.Contract(usdtAbi, usdtAddress);
  const wowCt = new web3.eth.Contract(wowAbi, wowAddress);
  const swapCt = new web3.eth.Contract(swapAbi, swapAddress);

  // 1.合约查询信息
  const [usdtEthNum, setUsdtEthNum] = useState(""); // usdt -> eth
  const [wowEthNum, setWowEthNum] = useState(""); // wow -> eth
  const [contractUsdtNum, setContractUsdtNum] = useState(""); // ct -> usdt
  const [contractWowNum, setContractWowNum] = useState(""); // ct -> wow

  const [usdtTotalSupplyNumAll, setUsdtTotalSupplyNumAll] = useState(""); // usdt -> totalSupply
  const [wowTotalSupplyNumAll, setWowTotalSupplyNumAll] = useState(""); // wow -> totalSupply

  const [usdtTotalSupplyNum, setUsdtTotalSupplyNum] = useState(""); // usdt -> totalSupply
  const [wowTotalSupplyNum, setWowTotalSupplyNum] = useState(""); // wow -> totalSupply

  // const [usdtApprovalNum, setUsdtApprovalNum] = useState(""); // usdt -> Approval
  // const [wowApprovalNum, setWowApprovalNum] = useState(""); // wow -> Approval
  const [swapUSDTNum, setSwapUSDTNum] = useState(""); // swap -> USDT
  const [swapWOWNum, setSwapWOWNum] = useState(""); // swap -> WOW

  // === 用户信息 ===
  const userAddress = "0xCF24A4DA82EBA5787f28a4eA160DcBFE6E0c6f01";
  const userPrivateKey =
    "0x3a5090485b40a86c5833ace42d3f133d93ad40d8f9df75e360bec1029f4311ad";

  // 1.用户查询信息
  const [userEthNum, setUserEthNum] = useState(""); // user -> eth
  const [userUsdtNum, setUserUsdtNum] = useState(""); // user -> usdt
  const [userWowNum, setUserWowNum] = useState(""); // user -> wow
  const [userApprovalUsdtNum, setUserApprovalUsdtNum] = useState(""); // user -> Approval -> usdt
  const [userApprovalWowNum, setUserApprovalWowNum] = useState(""); // user -> Approval -> wow

  // === transfer ===
  const [ethExUsdtNum, setEthExUsdtNum] = useState(""); // user -> eth -> USDT
  const [ethExWowNum, setEthExWowNum] = useState(""); // user -> eth -> WOW
  const [usdtExWowNum, setUsdtExWowNum] = useState(""); // user -> USDT -> WOW
  const [WowExUsdtNum, setWowExUsdtNum] = useState(""); // user -> WOW -> USDT

  // === 查询模块 ===
  // 1.查询 Contract -> ETH
  const queryEthNum = async (address: string) => {
    try {
      const balance = await web3.eth.getBalance(address);
      const b_num = `${web3.utils.fromWei(balance, "ether")} ether`; // wei 转 ether
      return b_num;
    } catch (err) {
      console.log("queryUsdtEthNum err =>", err);
    }
  };

  // 2.查询 Contract -> totalSupply
  const queryTotalSupply = async (contractObj: any, uint: string = "ether") => {
    try {
      const totalSupply_num = (await contractObj.methods
        .totalSupply()
        .call()) as string;
      const b_num = `${web3.utils.fromWei(totalSupply_num, "ether")} ${uint}`; // wei 转 ether
      return b_num;
    } catch (err) {
      console.log("queryTotalSupply err =>", err);
    }
  };

  // 3.查询 Contract -> token
  const queryContractToken = async (
    contractObj: any,
    address: string,
    unit: string = "ether"
  ) => {
    try {
      const ct_token_num = await contractObj.methods.balanceOf(address).call();
      const b_num = `${web3.utils.fromWei(ct_token_num, "ether")} ${unit}`;
      return b_num;
    } catch (err) {
      console.log("queryContractToken err =>", err);
    }
  };

  //4.查询 Contract -> approval
  const queryContractApproval = async (
    contractObj: any,
    ownerAddress: string,
    spenderAddress: string,
    unit: string = "ether"
  ) => {
    try {
      const ct_approval_num = await contractObj.methods
        .allowance(ownerAddress, spenderAddress)
        .call();
      const b_num = `${web3.utils.fromWei(ct_approval_num, "ether")} ${unit}`;
      return b_num;
    } catch (err) {
      console.log("queryContractToken err =>", err);
    }
  };

  // === Buy 模块 ===
  // 授权
  const approval_token = async (
    buy_approval_data: any,
    _value: string,
    _ownerAddress: string,
    _spenderAddress: string
  ) => {
    try {
      // 2.创建交易对象
      // 估算一笔交易的汽油价格
      const gasAmount = await web3.eth.estimateGas({
        from: _ownerAddress,
        to: _spenderAddress,
        data: buy_approval_data
      });

      // Max gas
      const gas_multiple = new BN("2");
      const _gasAmount = new BN(gasAmount.toString());
      const max_gas = _gasAmount.mul(gas_multiple).toString();
      const tx = {
        from: _ownerAddress,
        to: _spenderAddress,
        gas: max_gas, // 你愿意为此交易支付的最大 Gas 数量
        gasPrice: gasAmount, // 为此交易付出的gas
        data: buy_approval_data
      };
      // 3.签名交易数据
      const signedTx = await web3.eth.accounts.signTransaction(
        tx,
        userPrivateKey
      );

      // 4.广播交易数据
      const receipt = await web3.eth.sendSignedTransaction(
        signedTx.rawTransaction
      );
      // 判断交易是否成功
      if (receipt.status) {
        return true;
      } else {
        return false;
      }
    } catch (err) {
      console.log("approval_token err =>", err);
    }
  };

  // transferFrom
  // type:1usdt -> wow, 2wow -> usdt
  const buy_transferFrom = async (
    _fromAddress: string,
    _toAddress: string,
    _value: string,
    type: number = 1
  ) => {
    let buy_transferFrom_data = null;
    // 1.创建交易数据
    if (type === 1) {
      buy_transferFrom_data = swapCt.methods.buyWOW(_value).encodeABI();
    } else {
      buy_transferFrom_data = swapCt.methods.buyUSDT(_value).encodeABI();
    }
    // 估算一笔交易的汽油价格
    const gasAmount = await web3.eth.estimateGas({
      from: _fromAddress,
      to: _toAddress,
      data: buy_transferFrom_data
    });

    // Max gas
    const gas_multiple = new BN("2");
    const _gasAmount = new BN(gasAmount.toString());
    const max_gas = _gasAmount.mul(gas_multiple).toString();

    // 2.构建对象
    const tx = {
      from: _fromAddress,
      to: _toAddress,
      gas: max_gas, // 你愿意为此交易支付的最大 Gas 数量
      gasPrice: gasAmount, // 为此交易付出的gas
      data: buy_transferFrom_data
    };
    // 3.签名
    const signedTx = await web3.eth.accounts.signTransaction(
      tx,
      userPrivateKey
    );

    // 4.广播
    const receipt = await web3.eth.sendSignedTransaction(
      signedTx.rawTransaction
    );
    // 判断交易是否成功
    if (receipt.status) {
      return true;
    } else {
      return false;
    }
  };

  // eth -> Token
  const buy_ETH_Token = (
    fromAddress: string,
    toAddress: string,
    value: string
  ) => {
    if (fromAddress !== "" && toAddress !== "" && value !== "") {
      // 校验
      const tx = {
        from: fromAddress,
        to: toAddress,
        value: web3.utils.toWei(value, "ether")
      };
      try {
        web3.eth.sendTransaction(tx).then(() => {
          upDateAll();
        });
      } catch (err) {
        console.log("buy_ETH_Token err =>", err);
      }
    }
  };

  // USDT 与 WOW 兑换
  // type: 1使用usdt 兑换 wow， 2使用wow 兑换 usdt
  const buy_USDT_WOW = async (type: number = 1) => {
    let _value = "";
    let buy_approval_data = "";
    if (type === 1) {
      // 校验
      if (usdtExWowNum === "") return;
      _value = web3.utils.toWei(usdtExWowNum, "ether"); // 1ethr 转wei

      // 1.创建 交易数据
      buy_approval_data = usdtCt.methods
        .approve(swapAddress, _value)
        .encodeABI();

      const is_approval_ok = await approval_token(
        buy_approval_data,
        _value,
        userAddress,
        usdtAddress
      );
      if (is_approval_ok) {
        setUserApprovalUsdtNum(
          (await queryContractApproval(
            usdtCt,
            userAddress,
            swapAddress,
            "USDT"
          )) as string
        );
        // buy wow
        const is_transfer_ok = await buy_transferFrom(
          userAddress,
          swapAddress,
          _value,
          1
        );
        if (is_transfer_ok) {
          upDateAll();
        }
      }
    } else {
      if (WowExUsdtNum === "") return;
      _value = web3.utils.toWei(WowExUsdtNum, "ether"); // 1ethr 转wei

      // 1.创建 交易数据
      buy_approval_data = wowCt.methods
        .approve(swapAddress, _value)
        .encodeABI();

      const is_approval_ok = await approval_token(
        buy_approval_data,
        _value,
        userAddress,
        wowAddress
      );
      if (is_approval_ok) {
        setUserApprovalWowNum(
          (await queryContractApproval(
            wowCt,
            userAddress,
            swapAddress,
            "WOW"
          )) as string
        );

        const is_transfer_ok = await buy_transferFrom(
          userAddress,
          swapAddress,
          _value,
          2
        );

        if (is_transfer_ok) {
          upDateAll();
        }
      }
    }
  };

  // 更新数据
  const upDateAll = async () => {
    // 合约
    setUsdtEthNum((await queryEthNum(usdtAddress)) as string);
    setWowEthNum((await queryEthNum(wowAddress)) as string);
    setContractUsdtNum(
      (await queryContractToken(usdtCt, usdtAddress, "USDT")) as string
    );
    setContractWowNum(
      (await queryContractToken(wowCt, wowAddress, "WOW")) as string
    );

    setUsdtTotalSupplyNum(
      (await queryContractToken(usdtCt, senderAddress, "USDT")) as string
    );
    setWowTotalSupplyNum(
      (await queryContractToken(wowCt, senderAddress, "WOW")) as string
    );

    setUsdtTotalSupplyNumAll(
      (await queryTotalSupply(usdtCt, "USDT")) as string
    );
    setWowTotalSupplyNumAll((await queryTotalSupply(wowCt, "WOW")) as string);

    // user
    setUserEthNum((await queryEthNum(userAddress)) as string);
    setUserUsdtNum(
      (await queryContractToken(usdtCt, userAddress, "USDT")) as string
    );
    setUserWowNum(
      (await queryContractToken(wowCt, userAddress, "WOW")) as string
    );
    setUserApprovalUsdtNum(
      (await queryContractApproval(
        usdtCt,
        userAddress,
        swapAddress,
        "USDT"
      )) as string
    );
    setUserApprovalWowNum(
      (await queryContractApproval(
        wowCt,
        userAddress,
        swapAddress,
        "WOW"
      )) as string
    );
  };

  // === 初始化 web3 ===
  useEffect(() => {
    web3.eth.net.isListening().then(async (res) => {
      console.log("is ok =>", res);
      // 合约
      setUsdtEthNum((await queryEthNum(usdtAddress)) as string);
      setWowEthNum((await queryEthNum(wowAddress)) as string);
      setContractUsdtNum(
        (await queryContractToken(usdtCt, usdtAddress, "USDT")) as string
      );
      setContractWowNum(
        (await queryContractToken(wowCt, wowAddress, "WOW")) as string
      );

      setSwapUSDTNum(
        (await queryContractToken(usdtCt, swapAddress, "USDT")) as string
      );
      setSwapWOWNum(
        (await queryContractToken(wowCt, swapAddress, "WOW")) as string
      );

      setUsdtTotalSupplyNumAll(
        (await queryTotalSupply(usdtCt, "USDT")) as string
      );
      setWowTotalSupplyNumAll((await queryTotalSupply(wowCt, "WOW")) as string);

      setUsdtTotalSupplyNum(
        (await queryContractToken(usdtCt, senderAddress, "USDT")) as string
      );
      setWowTotalSupplyNum(
        (await queryContractToken(wowCt, senderAddress, "WOW")) as string
      );

      // user
      setUserEthNum((await queryEthNum(userAddress)) as string);
      setUserUsdtNum(
        (await queryContractToken(usdtCt, userAddress, "USDT")) as string
      );
      setUserWowNum(
        (await queryContractToken(wowCt, userAddress, "WOW")) as string
      );
      setUserApprovalUsdtNum(
        (await queryContractApproval(
          usdtCt,
          userAddress,
          swapAddress,
          "USDT"
        )) as string
      );
      setUserApprovalWowNum(
        (await queryContractApproval(
          wowCt,
          userAddress,
          swapAddress,
          "WOW"
        )) as string
      );
    });
  }, []);

  return (
    <div className="dex">
      <p className="ft-20">Supply USDT - WOW</p>
      <div style={{ padding: "0 10px" }}>
        <p>USDT TotalSupply ALL:{usdtTotalSupplyNumAll}</p>
        <p>WOW TotalSupply ALL:{wowTotalSupplyNumAll}</p>

        <p>USDT TotalSupply Balance:{usdtTotalSupplyNum}</p>
        <p>WOW TotalSupply Balance:{wowTotalSupplyNum}</p>
      </div>

      <p className="ft-20">Contract Swap info</p>
      <div style={{ padding: "0 10px" }}>
        <p>Swap Contract USDT:{swapUSDTNum}</p>
        <p>Swap Contract WOW:{swapWOWNum}</p>
      </div>

      <p className="ft-20">Contract info</p>
      <div style={{ padding: "0 10px" }}>
        <p>Contract USDT -&gt; ETH:{usdtEthNum}</p>
        <p>Contract WOW -&gt; ETH:{wowEthNum}</p>
        <p>Contract USDT:{contractUsdtNum}</p>
        <p>Contract WOW:{contractWowNum}</p>
      </div>
      <p className="ft-20">User info</p>
      <div style={{ padding: "0 10px" }}>
        <p>user-ETH:{userEthNum}</p>
        <p>user-USDT:{userUsdtNum}</p>
        <p>user-WOW:{userWowNum}</p>
        <p>userApprovalUSDT -&gt; Swap:{userApprovalUsdtNum}</p>
        <p>userApprovalWOW -&gt; Swap:{userApprovalWowNum}</p>
      </div>

      <p className="ft-20">Transfer</p>
      <div style={{ padding: "0 10px" }}>
        <span>ETH Buy USDT</span>
        <input
          placeholder="input ETH Num! ether"
          value={ethExUsdtNum}
          onChange={(e) => setEthExUsdtNum(e.target.value)}
        ></input>
        <button
          type="button"
          onClick={() => buy_ETH_Token(userAddress, usdtAddress, ethExUsdtNum)}
        >
          go1
        </button>
      </div>

      <div style={{ padding: "0 10px" }}>
        <span>ETH Buy WOW</span>
        <input
          placeholder="input ETH Num! ether"
          value={ethExWowNum}
          onChange={(e) => setEthExWowNum(e.target.value)}
        ></input>
        <button
          type="button"
          onClick={() => buy_ETH_Token(userAddress, wowAddress, ethExWowNum)}
        >
          go2
        </button>
      </div>

      <div style={{ padding: "0 10px" }}>
        <span>USDT Buy WOW</span>
        <input
          placeholder="input USDT Num! ether"
          value={usdtExWowNum}
          onChange={(e) => setUsdtExWowNum(e.target.value)}
        ></input>
        <button type="button" onClick={() => buy_USDT_WOW(1)}>
          go3
        </button>
      </div>

      <div style={{ padding: "0 10px" }}>
        <span>WOW Buy USDT</span>
        <input
          placeholder="input WOW Num! ether"
          value={WowExUsdtNum}
          onChange={(e) => setWowExUsdtNum(e.target.value)}
        ></input>
        <button type="button" onClick={() => buy_USDT_WOW(2)}>
          go4
        </button>
      </div>

      <p className="ft-20">User Wallet</p>
      <div style={{ padding: "0 10px" }}>
        <button type="button">Send</button>
        <button type="button" style={{ marginLeft: "10px" }}>
          Receipt
        </button>
        <button type="button" style={{ marginLeft: "10px" }}>
          History
        </button>
      </div>
    </div>
  );
};

export default UseDex;
